<template>
  <div class="sll">
    <!-- 修改组件 -->
    <el-tooltip class="item" effect="dark" content="修改" placement="bottom-start">
      <el-button
        :disabled='!modData.jobStatus'
        style="color:#0B9AC3;border:none;"
        icon="el-icon-edit"
        circle
        @click="modificationiClick"
      ></el-button>
      <!-- @click="DialogVisibleMods = true" -->
    </el-tooltip>
    <div class="diaologs">
      <el-dialog
        title="编辑"
        :visible.sync="DialogVisibleMods"
        width="760px"
        :before-close="handleCloses"
        :show-close="false"
        :modal-append-to-body="false"
        style="text-align: left;"
        modal
      >
        <!-- :key="keyNumb" -->
        <div
          class="list"
          v-for="(item,index) in attributeOrderClone"
          :key="index"
          v-if="item.modificationSign"
        >
          <span class="fon" v-if="item.EN==='shengchengcronExpression'">
            <el-link class="fon" type="success" @click="linkClick">{{item.CN}}</el-link>
          </span>
          <span class="fon" v-else>
            <span v-if="!item['skipSign']&&item['Exp']!=''" style="color:red;">*</span>
            {{item.CN}}:
          </span>
          <span class="inb" v-if="item.EN==='shengchengcronExpression'">
          </span>
          <span class="inb" v-if="item.type==='input'">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="fromModData[item.EN]"
              v-if="item.EN==='notes' || item.EN==='memo'"
            ></el-input>
            <el-input
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请输入内容"
              @blur="BurExp($event,item,index)"
              clearable
              size="mini"
              v-else
            ></el-input>
          </span>
          <!-- <span v-if="!item.result" class="font_color">{{item.err}}</span> -->
          <el-tooltip
            v-if="!item.result"
            class="item"
            effect="dark"
            :content="item.err"
            placement="top"
          >
            <el-button icon="el-icon-warning" circle></el-button>
          </el-tooltip>
          <span class="inb" v-if="item.type=='date'">
            <!-- <h1>{{modData.createTime}}</h1> -->
            <el-date-picker
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="getSTime"
              style="width:90%"
              size="mini"
            ></el-date-picker>
          </span>
          <!-- select--------------------------------------- -->
          <!-- {{fromModData}} -->
          <span v-if="item.type=='select'" class="inb">
            <!-- 字典  typeGroupCode -->
            <!-- {{fromModData}} -->
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
              clearable
              v-if="item.typeGroupCode"
              @change="changeFromModData"
            >
              <!-- {{fromModData[item.EN]}} -->
              <el-option
                v-for="i in optionsZi[item.EN]"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
            <!-- 字典 dictTable-->
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
              clearable
              v-else-if="item.dictTable"
            >
              <el-option
                v-for="i in searchOptionTable[item.EN]"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
            <!-- 小区管理页面   superior -->
            <el-cascader
              v-else-if="item.EN == 'superior'"
              v-model="fromModData[item.EN]"
              :options="superiorListOption"
              :props="{ checkStrictly: true }"
              size="mini"
              clearable
            ></el-cascader>
            <!-- 租户管理员管理页面---租户 -->
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
              clearable
              v-else-if="item.EN == 'sysCompanyCode'"
              @change="sysCompanyCodeChange(fromModData[item.EN])"
            >
              <!-- {{fromModData[item.EN]}} -->
              <el-option
                v-for="i in getFindByTypeData"
                :key="i.value"
                :label="i.name"
                :value="i.sysCompanyCode"
              ></el-option>
            </el-select>
            <!-- 租户管理员管理页面---角色 -->
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
              clearable
              v-else-if="item.EN == 'groupId'"
              @change="sysRoleChange"
            >
              <!-- {{fromModData[item.EN]}} -->
              <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
            </el-select>
            <el-select
              v-else
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
              clearable
            >
              <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </span>
          <!-- user -->
          <span v-if="item.type=='user'">
            <!-- {{useruData}} -->
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
            >
              <el-option v-for="i in useruData" :key="i.value" :label="i.name" :value="i.id"></el-option>
            </el-select>
          </span>
          <!-- 单选 -->
          <span v-if="item.type=='radio'">
            <!-- {{item.radio}} -->
            <div style="margin-top: 20px">
              <el-radio-group v-model="fromModData[item.EN]" size="small">
                <el-radio-button v-for="i in item.radio" :label="i.code" :key="i.code">{{i.name}}</el-radio-button>
              </el-radio-group>
            </div>
          </span>
          <!-- 计数器 -->
          <span v-if="item.type=='number'">
            <span style="margin-top: 20px">
              <el-input-number v-model="fromModData[item.EN]" :min="0" label="描述文字" size="mini"></el-input-number>
            </span>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="modifyData(true,modData)" size="mini">确定</el-button>
          <el-button @click="modifyData(false,modData)" size="mini">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  selectNameByuserId,
  getSelectByCodeAndType //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from "@/api/TenantAdministratorManagement";
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  name: "modificationi",
  props: [
    "modData",
    "attributeOrder",
    "optionsZi",
    "searchOptionTable",
    "TD",
    "UserArr",
    "useruData",
    "getFindByTypeData",
    "superiorListOption"
  ],
  data() {
    return {
      keyNumb:0,
      DialogVisibleMods: false,
      //深克隆
      attributeOrderClone: undefined,
      //表单里面的值
      fromModData: undefined,
      // 组件类型
      modelType: "search",
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      //编辑里面单选
      XTD: undefined,
      //查用户
      // useruData:[],
      // 备注
      textarea: "",
      // 改变的数据
      sysCompanyCodeRoles: "",
      // 租户信息
      // getFindByTypeData:[],
      // 返回的角色对象
      roleArr: [],
      // 返回的角色对象-默认值
      roleArrObj: ""
    };
  },

  watch: {
    optionsZi(newVal) {
      // console.log(newVal);
      this.searchOption = newVal;
    },
    searchOptionTable(newVal) {
      // console.log(newVal);
      this.searchOptions = newVal;
    },
    modData(newData) {
      // console.log(newData,'888666');
      this.getUpdataWatch();
    },
    attributeOrder:{
      deep:true,
      handler(newValue,oldValue){
        // console.log('深度监听attributeOrder!')
        // console.log(newValue)
        this.attributeOrderClone=JSON.parse(JSON.stringify(newValue))
      }
    }
  },
  computed: {
    TableDataModel() {
      let new_DataModel = JSON.parse(JSON.stringify(this.attributeOrder));
      for (let i = 0; i < new_DataModel.length; i++) {
        if (!new_DataModel[i].modificationSign) {
          console.log("-------------计算属性-----------");
          new_DataModel.splice(i, 1);
        }
      }
      // console.log(new_DataModel);
      return new_DataModel;
    }
  },
  mounted() {
    [this.attributeOrderClone, this.fromModData, this.XTD] 
    = JSON.parse(JSON.stringify(
        [this.attributeOrder, this.modData, this.TD])
    );
    // this.changeDictionariesType(this.fromModData)
    // console.log(XID)
    // console.log('*****************')
    // console.log(this.attributeOrderClone)
    // console.log(this.fromModData)
    // console.log(this.modData,99888);
  },
  methods: {
      linkClick(){
          window.open('http://cron.qqe2.com/')
      },
    changeFromModData(){
    // this.changeDictionariesType(this.fromModData)
    },
    // 字典值的类型转换
    changeDictionariesType(fromModData){
      // console.log(fromModData,'改变之前');  
      for (const key in fromModData) {
        if (fromModData.hasOwnProperty(key)) {
          const element = fromModData[key];
          let elements
          if (element) {
            elements = String(element)
          }
          fromModData[key] = elements
        }
      }
      // console.log(fromModData,'改变之后');  
    },
    modificationiClick() {
      console.log(this.fromModData,'shishenme');
      
      // this.changeDictionariesType(this.fromModData)
      // this.keyNumb = this.keyNumb + 1
      // 打开窗口
      this.DialogVisibleMods = true;
      // this.$emit('modificationiClickData','点击修改')
      // 获取角色原始数据
      this.getSelectNameByuserIds();
    },
    // 添加
    // addRoleModel(){
    //   roleId
    // },
    // 获取角色原始数据
    async getSelectNameByuserIds() {
      // console.log(1,'ccccccccccccccc');
      // console.log(this.fromModData);
      // let fromModData = undefined
      // this.$nextTick(function(){
      // fromModData = this.fromModData
      // })
      // 赋值
      console.log(this.modData, "999");
      const sysCompanyCode = this.modData.sysCompanyCode;
      const id = this.modData.id;

      if (this.modData.sysCompanyCode) {
        // let sysCompanyCode = undefined
        // const sysCompanyCode = this.fromModData.sysCompanyCode
        // this.$nextTick(function(){
        //   sysCompanyCode = this.modData.sysCompanyCode
        // })
        // console.log(this.$parent.$parent.$parent,'youme');
        // console.log(sysCompanyCode,'???');
        const res = await selectNameByuserId(id);
        // const res = this.$parent.$parent.$parent.getSelectNameByuserId(id)
        // 如何将   ----转换格式？？？
        console.log(res, 999922222);
        const objRole = res.data;
        if (objRole) {
          this.modData.groupId = objRole.id;
          this.roleArr = [objRole];
        }
        // 转换后拿到的数据
        // 赋值
        // this.modData.groupId = res.data
        // this.roleArr = 返回的数据
      }
    },
    // 角色
    sysRoleChange(newvalue) {
      // this.$emit('sysRoleChangeData',newvalue)
      const roleArrs = this.roleArr;
      var id = "";
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index];
        id = roleArrs[index].id;
      }
      this.$emit("sysRoleIdq", id);
      console.log(id, "????");
    },
    // 租户改变函数
    async sysCompanyCodeChange(value) {
      const res = await getSelectByCodeAndType(value);
      console.log(
        res,
        "子组件用于添加租户管理员时选择租户后之间传回选择租户的角色"
      );
      const roleObjs = res.data;
      // console.log(roleObjs,96968888);

      if (roleObjs) {
        this.roleArr = roleObjs;
        // console.log([roleObjs],999999999);

        console.log(this.roleArr, 8888888888888);
      } else {
        console.log("该租户没有对应的角色");
      }
    },
    // 更新数据
    getUpdataWatch() {
      [this.attributeOrderClone, this.fromModData, this.XTD] = JSON.parse(
        JSON.stringify([this.attributeOrder, this.modData, this.TD])
      );   
      // this.changeDictionariesType(this.fromModData)
    },
    // 字典回调
    // dictionariesCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOption = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
    // 跨表字典回调
    // dictionariesTableCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOptionTable = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
    handleCloses(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.modifyData(false, this.modData);
          done();
        })
        .catch(_ => {});
    },
    //转化时间格式
    getSTime(val) {
      this.modData.createTime = val;
    },
    //确定修改-取消修改
    modifyData(value, modData) {
      // this.changeDictionariesType(this.fromModData)
      //value=true  确定修改
      //value=false  取消修改
      // console.log(value,modData)
      let bur = true;
      if (value === false) {
        this.$emit("modifyData", false, this.fromModData);
        this.DialogVisibleMods = false;
        console.log(this.fromModData,'zheshishenem');
        
        // this.$message({
        //   message: "已取消修改",
        //   type: "success"
        // });
      } else {
         console.log(this.attributeOrderClone,'shenme?')
        for (let i = 0; i < this.attributeOrderClone.length; i++) {
          // console.log(this.attributeOrderClone[i].value,'前');
          this.attributeOrderClone[i].value = this.fromModData[this.attributeOrderClone[i].EN]
          
          // console.log(this.attributeOrderClone[i].value,'后');
          let at = this.attributeOrderClone[i];
          // -----------------------------
          // if (at.modificationSign) {
          //   if (at.result === false || at.value == '') { 
          //     console.log(at);                
          //     console.log(bur,888);                   
          //     // 判断红色星号    是否必须为空
          //     if (at["skipSign"]) {
          //       bur = true;
          //     }
          //     else{
          //       bur = false
          //       break;
          //     }
          //   }
          //   else{
          //   }       
          // }       
          // =----------------------------
                  
        if (at.modificationSign && !at["skipSign"]) {   
          console.log(at,777777777);
          
          if (at.result === false || at.value === "" ||at.value === undefined) {
          console.log(at,66666666666);
            // 判断红色星号    是否必须为空
            console.log(at.value,22);
            // numberqq +=1
            bur = false
            break
          }
        } else { 
          if (at.result === false) {
            bur = false
            break 
          }
        }
          // if (this.attributeOrderClone[i].value == "") {
            //   console.log("测试");
          //   console.log(this.attributeOrderClone[i]);
          // }
        }
          console.log(bur,9999);

        if (bur === true && value === true) {
          console.log(88888);

          this.$emit("modifyData", value, this.fromModData);
          this.DialogVisibleMods = false;
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else if (bur === false && value === true) {
          this.$message({
            message: "请输入合法内容！",
            type: "warning"
          });
        }
      }
    },

    //正则表达式
    BurExp(e, item, index) {
      // if (this.attributeOrderClone[index].attributeOrderClone) {
      if (this.attributeOrderClone[index].skipSign && e.target.value === '') {
        item.result = true;
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value);
        item.result = boolean;
      }
    }
  },
  created() {
    // this.getSelectNameByuserIds()
  }
};
</script>
<style scoped src="src/styles/allCss.css"></style>
<style lang="scss" scoped>
.sll {
  .diaologs {
    .el-dialog__wrapper {
      /deep/.dialog {
        width: 760px;
        // padding-right: 20px;
      }
    }
  }

  // /deep/.el-dialog{
  //   .el-dialog__header{
  //   width: 780px;
  //   }
  //   .el-dialog__body{
  //   width: 780px;
  //   }
  // }
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    // height: 44px;
    // width: 370px;
    // width: 320px;
    // margin-left: 20px;
    // height: 44px;
    // width: 300px;
    // .inb{
    //   height: 44px;
    //   width: 370px;
    // }
    // margin: 0;
    // padding: 0;
    .fon {
      text-align: right;
      margin-right: 14px;
      width: 99px;
      .inb {
        height: 44px;
        width: 370px;
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
  }
}
</style>


